<!--
@description: pinia 使用 dome
-->
<route lang="json5" type="page">
// @formatter:off
{
  layout: 'theme',
  style: {
    navigationBarTitleText: 'Pinia 使用 Demo',
    // navigationStyle: 'default', // custom default
  }
}
 // @formatter:on
</route>

<script setup lang="ts">
/* ------------------------ 导入 与 引用 ----------------------------------- */
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'

const store = useUserStore()
const { userInfo } = storeToRefs(store)

// 改变用户名
const changeUserName = () => {
  store.setUserInfo({ userName: `uni-fteam${Math.random()}` })
}

onMounted(() => {
  console.log('userInfo', userInfo.value)
})
</script>

<template>
  <view p4>
    <view>用户名：{{ userInfo.userName }}</view>
    <button @click="changeUserName">改变用户名</button>
  </view>
</template>
